<template>
	<div class="goods-header">
		<div class="search">
			<el-input v-model.trim="searchKey" placeholder="请输入关键字" @keyup.enter="handleSearch" />
			<el-button type="primary" @click="handleSearch">搜索</el-button>
		</div>
		<div class="tabs">
			<div v-for="item in INDEX_TAB" :key="item.value" :class="['tabs-item', { 'active': tabIndex === item.value }]">
				{{ item.label }}
			</div>
		</div>
	</div>
</template>
<script setup>
import { INDEX_TAB } from '@/utils/index';
import mitt from '@/utils/bus';
const searchKey = ref('');

// 搜索
const handleSearch = () => {
	if (!searchKey.value) return;
	mitt.emit('search', searchKey.value);
}
</script>
<style lang="scss" scoped>
.goods-header {
	background: #fff;
	border-bottom: 1px solid #999;

	.search {
		padding: 10px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.tabs {
		display: flex;

		&-item {
			flex: 1;
			text-align: center;
			padding: 5px 0 10px 0;
		}
	}
}
</style>
